<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性过滤选择器</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#btn1").click(function() {
					$("div[title]").css("background-color", "#bbffaa")
				})
				$("#btn2").click(function() {
					$("div[title=test]").css("background-color", "#bbffaa")
				})
				$("#btn3").click(function() {
					$("div[title!=test]").css("background-color", "#bbffaa")
				})
				$("#btn4").click(function() {
					$("div[title^=test]").css("background-color", "#bbffaa")
				})
				$("#btn5").click(function() {
					$("div[title$=st]").css("background-color", "#bbffaa")
				})
				$("#btn6").click(function() {
					$("div[title*=st]").css("background-color", "#bbffaa")
				})
				$("#btn7").click(function() {
					$("div[title*=t]").css("background-color", "#bbffaa")
				})
				$("#btn8").click(function() {
					$("div.one :nth-child(1)").css("background-color", "#bbffaa")
					//:eq()下标从0开始，仅匹配其下一个元素
					//nth-child()下的第一个子元素下标从1开始
					//:nth-child(even)偶数
					//:nth-child(odd)奇数
					//:nth-child(xn)x的倍数 
				})
				$("#btn9").click(function() {
					$("div:first-child").css("background-color", "#bbffaa")
				})
				$("#btn10").click(function() {
					$("div:last-child").css("background-color", "#bbffaa")
				})
				$("#btn11").click(function() {
					$("div:only-child").css("background-color", "#bbffaa")
				})
				$("#btn12").click(function() {
					$("div[id][title*=t]").css("background-color", "#bbffaa")
				})
			})
		</script>
	</head>
	<body>
		<input type="button" value="选择 所拥有属性的元素." id="btn1" />
		<input type="button" value="选择 带有这个元素属性值的元素." id="btn2" />
		<input type="button" value="选择 不带有这个元素属性值的元素." id="btn3" />
		<input type="button" value="选择 属性值为test开头的div元素." id="btn4" />
		<input type="button" value="选择 属性值为st结尾的div元素." id="btn5" />
		<input type="button" value="选择 属性值包含st的元素." id="btn6" />
		<input type="button" value="选择 指定名,且属性值以t结尾的元素." id="btn7" />
		<input type="button" value="选择 指定选取." id="btn8" />
		<input type="button" value="选择 匹配第一个." id="btn9" />
		<input type="button" value="选择 匹最一个." id="btn10" />
		<input type="button" value="选择 选取唯一一个." id="btn11" />
		<input type="button" value="选择 多选." id="btn12" /><!-- 链接1-7 -->

		<br /><br />
		<!-- DIV元素 -->

		<div class="one" id="one" title="tesst">
			<div class="small">class为small</div>
			id为one<br />class为one的div
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one<br>title为test的div.
			<div class="small" title="other">class为small,title为other</div>
			<div class="small" title="test">class为small,title为test</div>
		</div>
		<div class="one">
			<div class="small">class为small</div>
			<div class="small">class为small</div>
			<div class="small">class为small</div>
			<div class="small"></div>
		</div>
		<div class="one">
			<div class="small">class为small</div>
			<div class="small">class为small</div>
			<div class="small">class为small</div>
			<div class="small" title="tesst">class为small,title为tesst</div>
		</div>
		<div class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8" />
		</div>
		<span id="mover">正在执行动画的<br />span元素.</span>
	</body>
</html>
